import React from 'react';
import ModalTableInModelInput from '@library/components/formx/extra/ModalTableInModelInput';
import { Form, Input, Checkbox } from 'antd';
import { ActionProps } from './interface';

const FormItem = Form.Item;

export const options = {
  width: 800,
  model: {
    title: '表单模板',
    columns: [
      { dataIndex: 'formName', width: 120, tooltip: true, ellipsis: true },
      { dataIndex: 'formDesc', width: 150, tooltip: true, ellipsis: true },
      { dataIndex: 'functionCode', width: 150, tooltip: true, ellipsis: true },
      { dataIndex: 'functionGroup', width: 150, tooltip: true, ellipsis: true },
      { dataIndex: 'updatedAt', width: 150, tooltip: true, ellipsis: true, format: 'date' },
    ],
    url: '/bk/api/fd/Form/find',
    query: { where: {}, order: [['createdAt', 'DESC']] },
    fieldNames: { label: 'formName', value: 'formName' },
    searchFieldsText: ["formName", "formDesc"],
    searchFields: ["formName", "formDesc"],

  },
};

const ActionController = ({
  formName,
  addUrl,
  jumpNewPage,
  showRowSelection,
  onChange,
  hideAddBtn,
  breadCrumbName
}: ActionProps) => {
  return (
    <>
      <FormItem label="新增/编辑表单">
        <ModalTableInModelInput {...options} id={'formName'} onChange={(e) => {
          onChange?.(e, 'formName');
        }} value={formName!} />
        {/* <Input
          value={formName}
          onChange={e => onChange?.(e.target.value, 'formName')} /> */}
      </FormItem>

      <FormItem label="新增/编辑表单面包屑名称" >
        <Input
          value={breadCrumbName}
          onChange={e => onChange?.(e.target.value, 'breadCrumbName')} />
      </FormItem>

      <FormItem label="新增url" >
        <Input
          value={addUrl}
          onChange={e => onChange?.(e.target.value, 'addUrl')} />
      </FormItem>

      <FormItem label="隐藏新增按钮" className="antd-form-item-row" >
        <Checkbox checked={hideAddBtn} onChange={(e) => onChange?.(e.target.checked, 'hideAddBtn')} />
      </FormItem>

      <FormItem label="跳转新页面" className="antd-form-item-row" >
        <Checkbox checked={jumpNewPage} onChange={(e) => onChange?.(e.target.checked, 'jumpNewPage')} />
      </FormItem>

      <FormItem label="显示勾选框" className="antd-form-item-row" >
        <Checkbox checked={showRowSelection} onChange={(e) => onChange?.(e.target.checked, 'showRowSelection')} />
      </FormItem>

    </>
  );
};

export default ActionController;